<!DOCTYPE html>
<!--suppress ThymeleafVariablesResolveInspection-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Responsive Admin Dashboard Template">
    <meta name="keywords" content="admin,dashboard">
    <meta name="author" content="skcats">
    <title></title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all" />
    <link th:href="@{/assets/plugins/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/assets/plugins/font-awesome/css/font-awesome.min.css}" rel="stylesheet">
    <link th:href="@{/assets/css/custom.css}" rel="stylesheet">
</head>
<style>
    ::-webkit-scrollbar {display:none}/*隐藏横向滚动条但可以滚动*/
    .layui-table-page {
        text-align: center;
    }

    .utable .layui-laypage .layui-laypage-curr .layui-laypage-em {
        background-color: #1E9FFF;
    }
    .layui-input-inline{margin-left: 50px;}
    .layui-form-item{margin-top: 20px;}
    .layui-form-label{width: 80px;}
    .layui-table-view thead th {
        text-align: center;
        font-weight: bold;
    }
    .layui-table-view tbody td {
        text-align: center;
    }
</style>
<body>
<!--数据表格样式及附件-->
<script type="text/html" id="bar">
    <a class="layui-btn layui-btn-xs" lay-event="search">
        <i class="layui-icon">&#xe615;</i>查看批注
    </a>

</script>

<!--头工具栏-->
<script id="toolbarDemo" type="text/html">
    <div class="layui-btn-container">
        <button id="add" class="layui-btn layui-btn-sm">请假申请</button>
        <button id="MyWork" class="layui-btn layui-btn-sm">我的任务</button>
<!--        <button id="HistoryTask" class="layui-btn layui-btn-sm">我的任务</button>-->
    </div>
</script>



<!--搜索栏-->


<!--数据表格  数据表格使用的是方法渲染-->
<div class="utable">
    <table class="layui-table" id="demo" lay-filter="demo"></table>
</div>
</body>
<script th:src="@{/assets/plugins/jquery/jquery-3.1.0.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" th:inline="none">

    layui.use('table', function () {
        var table = layui.table;

        //方法渲染
        table.render({
            elem: '#demo'
            ,id: 'tab'
            ,height: 550
            ,width: 1200
            ,url: '/holiday/data' //数据接口
            ,page: true //开启分页
            ,toolbar: '#toolbarDemo'
            ,cols: [[ //表头
                {field: 'holidayid', title: '编号', sort: true}
                ,{field: 'emp_Name', title: '请假人'}
                ,{field: 'holidayDay', title: '请假天数'}
                ,{field: 'startTime',width:180, title: '开始时间'}
                ,{field: 'endTime',width:180, title: '结束时间'}
                ,{field: 'Title', title: '标题'}
                ,{field: 'status', title: '状态', templet: aaa}
                ,{field: 'Remark', title: '内容'}
                ,{fixed: 'right', title:'操作', width:150, toolbar: '#bar'}
            ]]
        });


        //点击添加iframe窗方法
        $("#add").on('click',function(){
            //iframe窗
            layer.open({
                type: 2,
                title: '请假申请',
                maxmin: true, //开启最大化最小化按钮
                area: ['1000px', '480px'],
                content: ['/holiday/toAdd']//这是链接你的页面地址 url
            });
        })



        //点击添加iframe窗方法
        $("#MyWork").on('click',function(){
            //iframe窗
            layer.open({
                type: 2,
                title: '我的任务',
                maxmin: true, //开启最大化最小化按钮
                area: ['100%', '100%'],
                content: ['/holiday/myTask']//这是链接你的页面地址 url
            });
        })

        //点击添加iframe窗方法
        $("#HistoryTask").on('click',function(){
            //iframe窗
            layer.open({
                type: 2,
                title: '历史任务',
                maxmin: true, //开启最大化最小化按钮
                area: ['100%', '100%'],
                content: ['/holiday/myHistoryTask']//这是链接你的页面地址 url
            });
        })



        function search(id) {
            layer.open({
                type: 2,
                title: '查看审批',
                maxmin: true, //开启最大化最小化按钮
                area: ['100%', '100%'],
                content: '/holiday/lookComment?holidayId='+id//这是链接你的页面地址 url
            })
        }

        //监听行工具事件
        table.on('tool(demo)', function (obj) {
            var data = obj.data;
            var id = data.holidayid;
            if (obj.event === 'search') {
                search(id);
            }
        })

        function aaa(data){
            var status = data.status;
            var btns = "";
            if (status == 1) {
                btns += '<span style="color:#eced14">审批中</span>';
            }else if (status == 2) {
                btns += '<span style="color:rgba(82,255,87,0.77)">已批准</span>';
            }else if(status == 3){
                btns += '<span style="color:#ed2a4a">不批准</span>';
            }else if(status == 0){
                return"初始录入";
            }
            return btns;
        }
    });







</script>
</html>